<template>
    <div class="flower">
        <el-card class="flower_card">
            <el-divider content-position="left">{{flower.flowerName}}</el-divider>
            <el-row>
                <el-col :span="5">
                    <img :src="flower.cover" alt="图片加载出错" class="cover">
                </el-col>
                <el-col :span="19">
                    <div class="information">类型：{{flower.type}}</div>
                   
                    <div class="information">价格：{{flower.price}}元</div>
                    <div class="information">库存：32株</div>
                </el-col>
            </el-row>
            <el-card class="description_box">
                <div class="title">
                    植物介绍
                </div>
                <div class="description">
                    {{flower.description}}
                </div>
                
            </el-card>
            <el-button class="back_button" @click="goHome">返回</el-button>
            <el-button type="success" class="shoppingCart" @click="addCart" plain icon="el-icon-shopping-cart-2">加入购物车</el-button>
        </el-card>

    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        name: 'flower',
        data() {
            return {
            }   
        },
        methods: {
            //加入购物车
            addCart() {
                this.$store.commit('ADDCART',this.flower)
                this.$message({
                    type:'success',
                    message:'添加购物车成功'
                });
            },
            //返回home
            goHome() {
            this.$router.push({ name: 'Home' });
        }
            
        },
        //获取名为flower的状态，并将其作为组件的计算属性。
        computed: {
            ...mapState({
                flower: (state) => state.flower,
            }),
        },
    }
</script>

<style scoped>
    .flower {
        background-color: #eee;
        display: flex;
        justify-content: center;
    }

    .flower_card {
        margin: 30px 0px;
        width: 900px;
    }

    .el-divider__text {
        font-size: 20px;
        font-weight: 600;
    }

    .cover {
        width: 100%;
    }

    .information {
        font-size: 16px;
        padding: 16px 0px;
        padding-left: 25px;
    }

    .description_box {
        margin-top: 30px;
    }

    .description {
        margin-top: 20px;
        font-size: 15px;
        line-height: 30px;
    }

    .title {
        font-size: 20px;
        color: #27ae60;
    }

    .shoppingCart {
        margin: 25px 0px;
        float: right;
    }

    .back_button {
        margin-top: 25px;
    }
</style>